<template>
  <div>

    <div class="remove-overflow">
      <div @input="onInput"  v-html="innerValue" contenteditable="true" class="markInput mark-config dzm-textarea" placeholder="你的每一次灵感悦动，都在把这个世界推向美好"/>
    </div>

    <div class="flex flex-wrap" style="justify-content: space-between">
      <button @click="applyBold" class="button">
        <font-awesome-icon :icon="['fas', 'bold']" />
      </button>
      <button @click="applyItalic" class="button">
        <font-awesome-icon :icon="['fas', 'italic']" />
      </button>
      <button @click="applyHeading" class="button">
        <font-awesome-icon :icon="['fas', 'heading']" />
      </button>
      <button @click="applyUl" class="button">
        <font-awesome-icon :icon="['fas', 'list-ul']" />
      </button>
      <button @click="applyOl" class="button">
        <font-awesome-icon :icon="['fas', 'list-ol']" />
      </button>
      <button @click="undo" class="button">
        <font-awesome-icon :icon="['fas', 'undo']" />
      </button>
      <button @click="redo" class="button">
        <font-awesome-icon :icon="['fas', 'redo']" />
      </button>



      <button v-if="type === 'mini'" @click="SendMindInner" class="button mini-send">
        <font-awesome-icon :icon="['fas', 'paper-plane']" />
      </button>

      <button v-else @click="SendMindInner" class="button big-send">
        <font-awesome-icon :icon="['fas', 'paper-plane']" />
      </button>
    </div>
  </div>
</template>

<script>
import { Marked } from '@ts-stack/markdown'
import TurnDownService from 'turndown'

export default {
  name: 'MarkdownEditor',

  props: ['value','type'],

  data() {
    return {
      innerValue: Marked.parse(this.value) || '',
      htmlValue:"",
      markdownValue:""
    }
  },

  mounted() {
    document.execCommand('defaultParagraphSeparator', false, 'p')
  },

  methods: {
    onInput(event) {
      const turndown = new TurnDownService({
        emDelimiter: '_',
        linkStyle: 'inlined',
        headingStyle: 'atx'
      })
      this.markdownValue = turndown.turndown(event.target.innerHTML)
      this.htmlValue = event.target.innerHTML
    },
    SendMindInner(){
      this.$emit('SendMind', this.htmlValue)
      for (let i = document.getElementsByClassName("markInput").length - 1; i >= 0; i--) {
        document.getElementsByClassName("markInput")[i].innerHTML = ''
      }
      this.innerValue = ''
    },
    applyBold() {
      document.execCommand('bold')
    },
    applyItalic() {
      document.execCommand('italic')
    },
    applyHeading() {
      document.execCommand('formatBlock', false, '<h1>')
    },
    applyUl() {
      document.execCommand('insertUnorderedList')
    },
    applyOl() {
      document.execCommand('insertOrderedList')
    },
    undo() {
      document.execCommand('undo')
    },
    redo() {
      document.execCommand('redo')
    }
  },
  watch: {
    value(val, oldVal) {
      console.log("改变",oldVal)
      for (let i = document.getElementsByClassName("markInput").length - 1; i >= 0; i--) {
        document.getElementsByClassName("markInput")[i].innerHTML = val
      }
    }
  }
}
</script>

<style scoped lang="scss">

.remove-overflow{

}

.mark-config{
  border-radius: 5px;
  margin-bottom: 10px;
  min-height: 75px;
  //overflow-y: scroll;
  padding: 10px;
  outline: none
}

.mark-config:focus{
  //border: none;
}

//.mark-config::-webkit-scrollbar {
//  /*滚动条整体样式*/
//  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/  height: 4px;
//}


/* 输入框 */
.dzm-textarea {
  padding: 5px;
}
/* 输入框为空时显示 placeholder */
.dzm-textarea:empty:before {
  content: attr(placeholder);
  font-weight: lighter;
  color: #b9b9b9;
  font-style: italic;
}
/* 输入框获取焦点时移除 placeholder */
.dzm-textarea:focus:after {
  content: none;
}

.button{
  margin-right: 10px;
  border: none;
  background-color: #f5f5f5;
  color: #adadad;
}

.button:hover{
  color: #2f2f2f;
  cursor: pointer;
}

.big-send{
  padding: 5px 20px;
  border-radius: 5px;
  color: #ffffff;
  background-color: #d7d7d7;
  margin-left: 470px;
}

.big-send:hover{
  background-color: #d0d0d0;
}

.mini-send{
  padding: 5px 8px 5px 6px;
  border-radius: 5px;
  color: #ffffff;
  background-color: #d7d7d7;
}
</style>
